<template>
  <page-card title="任务管理"
             :sub-title="$route.query.id ? '编辑' : '新增'"
             :need-back="true">
    <a-form v-bind="formItemLayout"
            :form="form"
            @submit="handleSubmit">
      <a-form-item label="任务名称：">
        <a-input placeholder="请输入任务名称"
                 v-decorator="['job_name', rule['job_name']]" />
      </a-form-item>
      <a-form-item label="任务组名：">
        <a-input placeholder="请输入任务组名"
                 v-decorator="['job_group', rule['job_group']]" />
      </a-form-item>
      <a-form-item label="请求方式：">
        <a-select v-decorator="['method',rule['method']]"
                  placeholder="请选择">
          <a-select-option v-for="(item,index) in select['method']"
                           :key="index"
                           :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="接口地址：">
        <a-input placeholder="请输入接口地址"
                 v-decorator="['url', rule['url']]" />
      </a-form-item>
      <a-form-item label="connect-type：">
        <a-select v-decorator="['contentType',rule['contentType']]"
                  placeholder="请选择">
          <a-select-option v-for="(item,index) in select['contentType']"
                           :key="index"
                           :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="请求参数">
        <a-input placeholder="请输入请求参数"
                 v-decorator="['params', rule['params']]" />
      </a-form-item>
      <a-form-item label="cron表达式">
        <a-input placeholder="请输入cron表达式"
                 v-decorator="['cron_expression', rule['cron_expression']]" />
      </a-form-item>
      <a-form-item label="错误策略">
        <a-select v-decorator="['misfire_policy', rule['misfire_policy']]"
                  placeholder="请选择">
          <a-select-option v-for="(item,index) in select['misfire_policy']"
                           :key="index"
                           :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="执行次数">
        <a-input-number v-decorator="['executeCount',rule['executeCount']]"
                        :min="0" />
      </a-form-item>
      <a-form-item label="状态">
        <a-switch default-checked
                  v-decorator="['status', { valuePropName: 'checked' }]" />
      </a-form-item>
      <a-form-item label="是否并发执行">
        <a-switch default-checked
                  v-decorator="['concurrent', rule['concurrent']]" />
      </a-form-item>
      <a-form-item label="说明">
        <a-textarea placeholder="请输入说明内容"
                    :auto-size="{ minRows: 5, maxRows: 5 }"
                    v-decorator="['remark', rule['remark']]" />
      </a-form-item>
      <a-form-item :wrapper-col="{
        xs: { span: 24, offset: 0 },
        sm: { span: 14, offset: 10 },
      }">
        <a-button type="primary"
                  html-type="submit">
          保存
        </a-button>
      </a-form-item>
    </a-form>
  </page-card>
</template>
<script>
import { saveOrUpdateTask, getByIdTask } from '../../api/quartz'
export default {
  data () {
    return {
      id: this.$route.query.id,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        }
      },
      select: {
        method: [{ label: 'get', value: 'get' }, { label: 'post', value: 'post' }],
        contentType: [{ label: 'application/json', value: 'application/json' }, { label: 'application/x-www-form-urlencoded', value: 'application/x-www-form-urlencoded' }],
        misfire_policy: [{ label: '立即执行', value: '3' }, { label: '执行一次', value: '2' }, { label: '放弃执行', value: '1' }]
      },
      rule: {
        job_name: { rules: [{ required: true, message: '请输入任务名' }] },
        job_group: { rules: [{ required: true, message: '请输入任务组' }] },
        method: { rules: [{ required: true, message: '请选择请求方法' }] },
        url: { rules: [{ required: true, message: '请输入接口地址' }] },
        contentType: { rules: [{ required: true, message: '请选择类型' }] },
        params: { rules: [{ required: false, message: '请输入请求参数' }] },
        cron_expression: { rules: [{ required: true, message: '请输入cron表达式' }] },
        executeCount: { rules: [{ required: true, message: '请输入执行次数' }] },
        misfire_policy: { rules: [{ required: true, message: '请选择错误策略' }] },
        status: { valuePropName: 'checked' },
        concurrent: { valuePropName: 'checked' },
        remark: { rules: [{ required: false }] }
      }
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'validate_other' })
  },
  watch: {
    id: {
      handler (newValue) {
        this.getByIdTask(newValue)
      },
      immediate: true
    }
  },
  mounted () {

  },
  methods: {
    getByIdTask (id) {
      let this_ = this
      if (id) {
        getByIdTask(id).then(res => {
          if (res) {
            this_.$nextTick(() => {
              this_.form.setFieldsValue({
                job_name: res.jobName,
                job_group: res.jobGroup,
                misfire_policy: res.misfirePolicy,
                status: res.status == '1',
                concurrent: res.concurrent == '1',
                cron_expression: res.cronExpression,
                executeCount: res.executeCount,
                remark: res.remark,
                method: res.invokeTarget.indexOf('get') > -1 ? 'get' : 'post',
                url: res.invokeTarget.split('"url":"')[1].split('","header"')[0],
                contentType: res.invokeTarget.split('"Content-Type":"')[1].split('"},"params"')[0],
                params: JSON.stringify(res.invokeTarget.split('"params":')[1].split('}\')')[0]) == '"{}"' ? '' : res.invokeTarget.split('params":')[1].split('}\')')[0]
              })
            })
          }
        })
      } else {
        this.$nextTick(() => {
          this.form.setFieldsValue({ misfire_policy: '3', status: false, concurrent: false })
        })
      }
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, fieldsValue) => {
        if (err) {
          return
        }
        let { job_name, job_group, cron_expression, executeCount, misfire_policy, status, concurrent, remark } = fieldsValue
        let value = { job_name, job_group, cron_expression, executeCount, misfire_policy, status: status ? '1' : '0', concurrent: concurrent ? '1' : '0', remark }
        value.invoke_target = `httpTask.${fieldsValue.method}('{"url":"${fieldsValue.url}","header":{"Content-Type":"${fieldsValue.contentType}"},"params":${fieldsValue.params || '{}'}}')`
        this.id ? value.id = this.id : ''
        saveOrUpdateTask(value).then(res => {
          this.message.success('保存成功')
          this.$router.push('/task/list')
        })
      })
    }
  }
}
</script>